<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀-首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/fonts/iconfont.css">
</head>
<body>
    <!-- nav导航栏 -->
    <div class="nav">
        <!-- 首行one -->
        <div class="one">
            <!-- 首行左边 -->
            <div class="left">
                <!-- 腾讯游戏logo -->
                <div class="logo">
                    <a href="#" title="腾讯游戏logo">
                        <img src="img/logo.png">
                    </a>
                </div>
                <!-- 会放大的图 -->
                <div class="big">
                    <img src="img/为街球集合.jpg" alt="">
                </div>
            </div>
            <!-- 首行右边 -->
            <div class="right">
                <!-- 成长守护平台 -->
                <div class="grow">
                    <a href=""><span class="iconfont icon-chengchang"></span></a>
                    <a href="" class="g">&nbsp&nbsp成长守护平台</a>
                </div>
                <!-- 腾讯游戏排行 -->
                <div class="game">
                    <div class="product">腾讯游戏排行榜</div>
                </div>
            </div>
        </div>

        <!-- 腾讯游戏排行下拉框 -->
        <div class="paihang">
            <!-- 左边排行榜 -->
            <div class="ph ph-left">
                <a href="">
                    <b>
                        新品端游排行榜
                        <span class="iconfont icon-youjiantou1 "></span>
                    </b>
                </a>
                <!-- 排行内容 -->
                <div class="items">
                    <ul>
                        <li><a href="">FIFA Online 4</a></li>
                        <li><a href="">NBA2KOnline2</a></li>
                        <li><a href="">天涯明月刀</a></li>
                        <li><a href="">剑灵</a></li>
                        <li><a href="">穿越火线</a></li>
                        <li><a href="">逆战</a></li>
                        <li><a href="">QQ炫舞</a></li>
                        <li><a href="">使命召唤OL</a></li>
                    </ul>
                </div>
            </div>
            <!-- 中间排行榜 -->
            <div class="ph ph-center">
                <a href="">
                    <b>
                        热门端游排行榜
                        <span class="iconfont icon-youjiantou1 "></span>
                    </b> 
                </a>
                <!-- 排行内容 -->
                <div class="items">
                    <ul>
                        <li><a href="">英雄联盟</a></li>
                        <li><a href="">穿越火线</a></li>
                        <li><a href="">地下城与勇士</a></li>
                        <li><a href="">天涯明月刀</a></li>
                        <li><a href="">QQ炫舞</a></li>
                        <li><a href="">剑灵</a></li>
                        <li><a href="">FIFA Online 4</a></li>
                        <li><a href="">逆战</a></li>
                        <li><a href="">NBA2KOnline2</a></li>
                    </ul>
                </div>
            </div>

            <!-- 右边排行榜 -->
            <div class="ph ph-right">
                <a href="">
                    <b>
                        新品手游排行榜
                        <span class="iconfont icon-youjiantou1 "></span>
                    </b>
                </a>
                <!-- 排行内容 -->
                <div class="items">
                    <ul>
                        <li><a href="">雪鹰领主</a></li>
                        <li><a href="">火影忍者</a></li>
                        <li><a href="">欢乐斗地主</a></li>
                        <li><a href="">天天爱消除</a></li>
                        <li><a href="">QQ飞车</a></li>
                    </ul>
                </div>
                <a href="">
                    <b>
                        热门手游排行榜
                        <span class="iconfont icon-youjiantou1 "></span>
                    </b>
                </a>
                <div class="items">
                    <ul>
                        <li><a href="">王者荣耀</a></li>
                        <li><a href="">和平精英</a></li>
                        <li><a href="">穿越火线：枪战王者</a></li>
                        <li><a href="">火影忍者</a></li>
                        <li><a href="">天天爱消除</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- head头部部分 -->
    <div class="head">
        <!-- 背景图 -->
        <div class="beijing">
            <a href="" title="查看详情"><img src="img/beijing.jpg"></a>
        </div>
        <!-- 顶部导航 -->
        <div class="ad-nav">
            <!-- 左边logo -->
            <a class="left" href="" title="王者荣耀">
                <img src="img/王者荣耀logo.png" >
            </a>
            <!-- 中间导航 -->
            <div class="center">
                <a class="cnav" href="" title="首页">
                    <div>首页</div>
                    <div>INDEX</div>
                </a>
                <a class="cnav" href="" title="游戏资料">
                    <div>游戏资料</div>
                    <div>DATA</div>
                </a>
                <a class="cnav" href="" title="内容中心">
                    <div>内容中心</div>
                    <div>CONTENTS</div>
                </a>
                <a class="cnav" href="" title="赛事中心">
                    <div>赛事中心</div>
                    <div>MATCH</div>
                </a>
                <a class="cnav" href="" title="百态王者">
                    <div>百态王者</div>
                    <div>CULTURE</div>
                </a>
                <a class="cnav" href="" title="社区活动">
                    <div>社区活动</div>
                    <div>COMMUNITY</div>
                </a>
                <a class="cnav" href="" title="玩家支持">
                    <div>玩家支持</div>
                    <div>PLAYER</div>
                </a>
            </div>
            <!-- 右边登录 -->
            <div class="right">
                <a class="pic" href=""><img src="img/欢迎登录.png"></a>
                <div class="text">
                    <a href="">欢迎登录</a>
                    <p>登录后查看游戏战绩</p>
                </div>
            </div>
        </div>
        <!-- 顶部导航下拉框 -->
        <div class="cart">
            <ul class="data">
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li><span class="iconfont icon-N_round_solid "></span>爆料站</li>
                <li><span class="iconfont icon-N_round_solid "></span>故事站</li>
                <li>游戏壁纸</li>
            </ul>
            <ul class="contents">
                <li>攻略中心</li>
                <li>英雄攻略</li>
                <li>视频中心</li>
                <li><span class="iconfont icon-N_round_solid "></span>开放素材库</li>
                <li>王者视角</li>
                <li>作者入驻</li>
                <li>媒体入驻</li>
            </ul>
            <ul class="match">
                <li><span class="iconfont icon-H_round_solid "></span>世界冠军杯</li>
                <li>KPL</li>
                <li><span class="iconfont icon-N_round_solid "></span>模拟战大师赛</li>
                <li>KPLGT</li>
                <li>高校赛</li>
                <li>大众赛</li>
                <li>全民赛</li>
                <li><span class="iconfont icon-N_round_solid "></span>赛事数据</li>
            </ul>
            <ul class="culture">
                <li>荣耀·传承</li>
                <li>王者文化站</li>
                <li>王者音乐听</li>
                <li>万千世界</li>
                <li>星光殿堂</li>
                <li>商户特权</li>
                <li><span class="iconfont icon-N_round_solid "></span>无限王者团</li>
            </ul>
            <ul class="community">
                <li><span class="iconfont icon-N_round_solid "></span>创意互动营</li>
                <li><span class="iconfont icon-H_round_solid "></span>王者营地</li>
                <li>游戏壁纸</li>
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
            </ul>
            <ul class="player">
                <li>版本介绍</li>
                <li>游戏介绍</li>
                <li>英雄资料</li>
                <li><span class="iconfont icon-N_round_solid "></span>爆料站</li>
                <li><span class="iconfont icon-N_round_solid "></span>故事站</li>
                <li>游戏壁纸</li>
            </ul>
        </div>

        <!-- 翻页广告 -->
        <div class="ad-one">
            <!-- 翻页左边 -->
            <div class="left">
                <!-- 底部导航 -->
                <div class="newtel">
                    <ul class="new_telst">
                        <li class="newon">新版本装备技巧</li>
                        <li class="">百力滋大挑战</li>
                        <li class="">蒙恬教你做大哥</li>
                        <li class="">斗鱼三雄争霸赛</li>
                        <li class="">比萨买一送一</li>
                    </ul>
                </div>
                <!-- 循环内容 -->
                <div class="new-wrap">
                    <!-- 内容1 -->
                    <div class="new_lst show" style="display: block;">
                        <a href=""><img src="img/新版本装备技巧.jpg"></a>
                    </div>
                    <!-- 内容2 -->
                    <div class="new_lst" style="display: none;">
                        <a href=""><img src="img/百力滋大挑战.jpg"></a>
                    </div>
                    <!-- 内容3 -->
                    <div class="new_lst" style="display: none;">
                        <a href=""><img src="img/蒙恬教你做大哥.jpg"></a>
                    </div>
                    <!-- 内容4 -->
                    <div class="new_lst" style="display: none;">
                        <a href=""><img src="img/斗鱼三雄争霸赛.jpg"></a>
                    </div>
                    <!-- 内容5 -->
                    <div class="new_lst" style="display: none;">
                        <a href=""><img src="img/比萨买一送一.jpg"></a>
                    </div>
                </div>
            </div>
            <!-- 翻页中间 -->
            <div class="middle">
                <!-- 首行导航部分 -->
                <div class="tab-head">
                    <div class="tab active">热门</div>
                    <div class="tab">新闻</div>
                    <div class="tab">公告</div>
                    <div class="tab">活动</div>
                    <div class="tab">赛事</div>
                    <div class="dian">···</div>
                </div>

                <!-- 循环内容部分 -->
                <div class="tab-body">
                    <!-- 内容1 -->
                    <div class="tab-item active">
                        <!-- 小标题 -->
                        <div class="ad_title">
                            <a href="">7月17日体验服停机更新公告</a>
                        </div>
                        <!-- 正文 -->
                        <div class="text">
                            <div class="word">
                                <div class="line" href="">
                                    <div class="h"><p>热门</p></div>
                                    <div class="t">王者荣耀周年庆表现道具设计...</div>    
                                </div>
                                <div class="time">07/16</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月15日体验服停机更新公告</div>
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月15日净化游戏环境声明及...</div>
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月15日外挂专项打击公告</div>
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月15日“演员”惩罚名单</div>
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月14日全服不停机更新公告</div>
                                </div>
                                <div class="time">07/14</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月14日全服不停机更新公告</div>
                                </div>
                                <div class="time">07/14</div>
                            </div>
                        </div>
                    </div>

                    <!-- 内容2 -->
                    <div class="tab-item">
                        <!-- 小标题 -->
                        <div class="ad_title">
                            <a href="">王者荣耀周年庆表现道具...</a>
                        </div>
                        <!-- 正文 -->
                        <div class="text">
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>新闻</p></div>
                                    <div class="t">百力滋X王者荣耀 大手笔赠送上...</div>    
                                </div>
                                <div class="time">07/14</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>新闻</p></div>
                                    <div class="t">蓝方惊现自走机甲？为你揭秘蜀...</div>
                                </div>
                                <div class="time">07/12</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>新闻</p></div>
                                    <div class="t">破浪对决中的战船是....戳开解锁...</div>
                                </div>
                                <div class="time">07/11</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>新闻</p></div>
                                    <div class="t">红方高地惊现新建筑？一起探秘...</div>
                                </div>
                                <div class="time">07/11</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>新闻</p></div>
                                    <div class="t">王者荣耀x名创优品惊喜联名！</div>
                                </div>
                                <div class="time">07/10</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>新闻</p></div>
                                    <div class="t">QQ飞车手游公测2周年开启，登...</div>
                                </div>
                                <div class="time">07/11</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>新闻</p></div>
                                    <div class="t">铂金铁盘比萨·【王者】光环降临！</div>
                                </div>
                                <div class="time">07/10</div>
                            </div>
                        </div>
                    </div>

                    <!-- 内容3 -->
                    <div class="tab-item">
                        <!-- 小标题 -->
                        <div class="ad_title">
                            <a href="">7月15日体验服停机更新公告</a>
                        </div>
                        <!-- 正文 -->
                        <div class="text">
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月15日体验服停机更新公告</div>    
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月15日净化游戏环境声明及处罚...</div>
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月15日外挂专项打击公告</div>
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月15日“演员”惩罚名单</div>
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月14日全服不停机更新公告</div>
                                </div>
                                <div class="time">07/14</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月14日全服不停机更新公告</div>
                                </div>
                                <div class="time">07/14</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="g"><p>公告</p></div>
                                    <div class="t">7月13日体验服停机更新公告</div>
                                </div>
                                <div class="time">07/13</div>
                            </div>
                        </div>
                    </div>

                    <!-- 内容4 -->
                    <div class="tab-item">
                        <!-- 小标题 -->
                        <div class="ad_title">
                            <a href="">【微信用户专属】李信新皮肤...</a>
                        </div>
                        <!-- 正文 -->
                        <div class="text">
                            <div class="word">
                                <div class="line" href="">
                                    <div class="h"><p>活动</p></div>
                                    <div class="t">【手Q用户专属】李信-一念神魔...</div>    
                                </div>
                                <div class="time">07/15</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="h"><p>活动</p></div>
                                    <div class="t">李信世冠皮肤即将上架，参与活...</div>
                                </div>
                                <div class="time">07/14</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="h"><p>活动</p></div>
                                    <div class="t">【三分之战，集奇兵制胜】活动...</div>
                                </div>
                                <div class="time">07/10</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="h"><p>活动</p></div>
                                    <div class="t">S20赛季开启，缤纷好礼等你</div>
                                </div>
                                <div class="time">07/08</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="h"><p>活动</p></div>
                                    <div class="t">【赛季冲刺，新版本探秘】活动</div>
                                </div>
                                <div class="time">07/02</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="h"><p>活动</p></div>
                                    <div class="t">抢先服更新 S20赛季来袭</div>
                                </div>
                                <div class="time">07/01</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="h"><p>活动</p></div>
                                    <div class="t">【赛季冲刺，新版本探秘】活动FAQ...</div>
                                </div>
                                <div class="time">07/02</div>
                            </div>
                        </div>
                    </div>

                    <!-- 内容5 -->
                    <div class="tab-item">
                        <!-- 小标题 -->
                        <div class="ad_title">
                            <a href="">7月13日【比赛服】版本更新</a>
                        </div>
                        <!-- 正文 -->
                        <div class="text">
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>赛季</p></div>
                                    <div class="t">2020年王者荣耀世界冠军杯小...</div>    
                                </div>
                                <div class="time">06/29</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>赛季</p></div>
                                    <div class="t">2020年王者荣耀世界冠军杯第...</div>
                                </div>
                                <div class="time">06/28</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>赛季</p></div>
                                    <div class="t">世冠小组赛抽签仪式6月28日现...</div>
                                </div>
                                <div class="time">06/24</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>赛季</p></div>
                                    <div class="t">2020年王者荣耀世界冠军杯(KC...</div>
                                </div>
                                <div class="time">06/24</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>赛季</p></div>
                                    <div class="t">无惧挑战向阳而生，TS冠军之夜...</div>
                                </div>
                                <div class="time">06/17</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>赛季</p></div>
                                    <div class="t">虎牙明星主播踢馆名校战队，峡...</div>
                                </div>
                                <div class="time">05/17</div>
                            </div>
                            <div class="word">
                                <div class="line" href="">
                                    <div class="x"><p>赛季</p></div>
                                    <div class="t">2020年KPL春季赛常规赛最佳阵...</div>
                                </div>
                                <div class="time">05/18</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 翻页右边 -->
            <div class="right">
                <!-- 上面下载游戏 -->
                <div class="top">下载游戏</div>
                <!-- 中间对局环境 -->
                <div class="mid">
                    <p><b>对局环境</b></p>
                </div>
                <!-- 下面体验专区 -->
                <div class="bottom">
                    <p><b>体验专区</b></p> 
                </div>
            </div>
        </div>

        <!-- 底部广告 -->
        <div class="ad-two">
            <!-- 图1 -->
            <div class="pic">
                <a href="" title="爆料站入口">
                    <img src="img/官方爆料站.png">
                </a>
            </div>
            <!-- 图2 -->
            <div class="pic two">
                <a href="" title="王者营地">
                    <img src="img/王者营地.jpg">
                </a>
            </div>
            <!-- 图3 -->
            <div class="pic three">
                <a href="" title="王者文化站">
                    <img src="img/荣耀传承.jpg">
                </a>
            </div>
            <!-- 图4 -->
            <div class="pic four">
                <a href="" title="赛事专区">
                    <img src="img/赛事专区.jpg">
                </a>
            </div>
        </div>
    </div>

    <!-- 主体部分 -->
    <div class="main">
        <!-- 内容中心 -->
        <div class="content">
            <!-- 左边视频选项卡切换 -->
            <div class="video">
                <!-- 题目 -->
                <div class="title">
                    <!-- 左边内容中心 -->
                    <div class="words">
                        <span class="iconfont icon-pintu"></span>
                        <b>内容中心</b>
                    </div>
                    <!-- 右边更多 -->
                    <div class="more">
                        <a href="">
                            <span class="iconfont icon-jjia-"></span>更多
                        </a>
                    </div>
                </div>
                <!-- 大标题 -->
                <div class="video-head">
                    <div class="video-tab act">精品栏目</div>
                    <div class="video-tab">赛事精品</div>
                    <div class="video-tab">英雄攻略</div>
                </div>
                <!-- 大标题下的主体 -->
                <div class="video-body">
                    <!-- 第1页精品栏目里的转换 -->
                    <div class="video-item act">
                        <!-- 精品栏目下的标题 -->
                        <div class="first-head">
                            <div class="font first-tab now">最新</div>
                            <div class="font first-tab">王者克制论</div>
                            <div class="font first-tab">王者视角</div>
                            <div class="font first-tab">策见打</div>
                            <div class="font first-tab">峡谷460</div>
                            <div class="font first-tab">百星王者带你飞</div>
                            <div class="font first-tab">狄仁杰封神榜</div>
                            <div class="font first-tab">棋高一招</div>
                        </div>
                        <!-- 精品栏目下的内容 -->
                        <div class="first-body">
                            <!-- 最新内容 -->
                            <div class="pictures first-item now">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/最新皮肤李信.jpg" alt="">
                                        <a href="">策见打：为瑶正名 这个英雄一点也不废！</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/最新皮肤猪八戒.jpg" alt="">
                                        <a href="">策见打：揭秘！九色鹿瑶的真正用途！瑶</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/最新皮肤马可波罗.jpg" alt="">
                                        <a href="">策见打：凭什么？赵云有了守护灵就能七进七出？</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/最新皮肤马超.jpg" alt="">
                                        <a href="">【王者克制论】不做混分背锅侠，李九教你辅王速成攻略</a>
                                    </div>
                                    <div>
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【百星王者带你飞】第144期亚瑟：黑暗的庇护，吾乃死亡骑士</a>
                                    </div>
                                    <div>
                                        <img src="img/11.jpg" alt="">
                                        <a href="">【棋高一招2】第十一期 魔种来袭，新科冠军MQ.逸宝带你快速了解新版本</a>
                                    </div>
                                    <div>
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【王者克制论】三分之地来袭，李九教你快速适应新赛季</a>
                                    </div>
                                    <div>
                                        <img src="img/12.jpg" alt="">
                                        <a href="">【百星王者带你飞】第143期司马懿：暗影来袭，魔语军师司马懿</a>
                                    </div>
                                </div>
                              
                            </div>                            
                            <!-- 王者克制论内容 -->
                            <div class="pictures first-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/最新皮肤姜子牙.jpg" alt="">
                                        <a href="">【王者克制论】不做混分背锅侠，李九教你辅王速成攻略</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/新英雄西施.jpg" alt="">
                                        <a href="">【王者克制论】三分之地来袭，李九教你快速适应新赛季</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/新英雄蒙犽.jpg" alt="">
                                        <a href="">【王者克制论】你真的会打野吗？李九教野王养成计划 娜可露露</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/周免英雄5.jpg" alt="">
                                        <a href="">【王者克制论】野区女神，替月行道？李九教你完美克制露娜</a>
                                    </div>
                                    <div>
                                        <img src="img/周免英雄6.jpg" alt="">
                                        <a href="">【王者克制论】天狼绘梦，飞天秒人？李九教你完美克制上官婉儿</a>
                                    </div>
                                    <div>
                                        <img src="img/周免英雄7.jpg" alt="">
                                        <a href="">【王者克制论】开黑总遇瓶颈？李九教你BP套路与阵容博弈</a>
                                    </div>
                                    <div>
                                        <img src="img/13.jpg" alt="">
                                        <a href="">【王者克制论】摇身一变，坦刺无敌？李九教你完美克制白起</a>
                                    </div>
                                    <div>
                                        <img src="img/新英雄镜.jpg" alt="">
                                        <a href="">【王者克制论】裂魂来袭，炮轰四方太无敌？李九教你完美克制黄忠</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 王者视角内容 -->
                            <div class="pictures first-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/1.jpg" alt="">
                                        <a href="">【王者视角】第三十六期：细看英雄榜，版本霸主是否易位？</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/2.jpg" alt="">
                                        <a href="">【王者视角】第三十五期：赛季初始，万象更新，中野散发新活力</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/3.jpg" alt="">
                                        <a href="">【王者视角】第三十四期：法系装备层出不穷，中路百家齐放！</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/4.jpg" alt="">
                                        <a href="">王者荣耀中出人意料的小细节！</a>
                                    </div>
                                    <div>
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【王者视角】第三十三期：斗榫合缝 万全补位之策</a>
                                    </div>
                                    <div>
                                        <img src="img/6.jpg" alt="">
                                        <a href="">《王者视角》-射手针对方针 精准狙击C位，抓住胜利的曙光</a>
                                    </div>
                                    <div>
                                        <img src="img/7.jpg" alt="">
                                        <a href="">【王者视角】第二十九期：护国佑民， 将军蒙恬的必胜之道</a>
                                    </div>
                                    <div>
                                        <img src="img/9.jpg" alt="">
                                        <a href="">【王者视角】第二十六期：画地为牢，这一方水土由我来守护！</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 策见打内容 -->
                            <div class="pictures first-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/13.jpg" alt="">
                                        <a href="">策见打：为瑶正名 这个英雄一点都不废！</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/最新皮肤猪八戒.jpg" alt="">
                                        <a href="">策见打：揭秘！九色鹿瑶的真正用途！瑶</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/周免英雄6.jpg" alt="">
                                        <a href="">策见打：凭什么？赵云有了守护灵就能七进七出？</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/最新皮肤马超.jpg" alt="">
                                        <a href="">【策见打】这就TM离谱，曹操居然是吸血鬼？</a>
                                    </div>
                                    <div>
                                        <img src="img/周免英雄7.jpg" alt="">
                                        <a href="">【策见打】天狼小队都是超级英雄？所以婉儿是个什么侠？</a>
                                    </div>
                                    <div>
                                        <img src="img/新英雄蒙恬.jpg" alt="">
                                        <a href="">【策见打】蒙恬：收您200，欢迎下次光临~</a>
                                    </div>
                                    <div>
                                        <img src="img/新英雄鲁班大师.jpg" alt="">
                                        <a href="">【策见打】孙尚香：你知道我这5年是怎么过的吗？！</a>
                                    </div>
                                    <div>
                                        <img src="img/新英雄西施.jpg" alt="">
                                        <a href="">【策见打】亚瑟和安琪拉是开饭店的？揭秘CP皮肤背后的故事！</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 峡谷460内容 -->
                            <div class="pictures first-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/11.jpg" alt="">
                                        <a href="">【峡谷460】06：梦泪再现无兵线拆家！Gemini偶遇灵魂画师</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/10.jpg" alt="">
                                        <a href="">【峡谷460】05：张大仙遭遇大威天龙，Gemini阿泰奇妙对线</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/9.jpg" alt="">
                                        <a href="">【峡谷460】04: 拖米遭遇“非法”组队？孤影上演正道的光！</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/12.jpg" alt="">
                                        <a href="">【峡谷460】03：程潇表演峡谷脱口秀 党妹COS本命英雄</a>
                                    </div>
                                    <div>
                                        <img src="img/6.jpg" alt="">
                                        <a href="">【峡谷460】02：梦泪：求求了！别再踢我了</a>
                                    </div>
                                    <div>
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【峡谷460】梦泪竟遭偷家，钟馗一勾入魂！</a>
                                    </div>
                                    <div>
                                        <img src="img/7.jpg" alt="">
                                        <a href="">【峡谷460】主播下饭玩家翻车？栏目上线快来投稿</a>
                                    </div>
                                    <div></div>
                                </div>
                            </div>
                            <!-- 百星王者带你飞内容 -->
                            <div class="pictures first-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/12.jpg" alt="">
                                        <a href="">【百星王者带你飞】第144期亚瑟：黑暗的庇护，吾乃死亡骑士</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【百星王者带你飞】第143期司马懿：暗影来袭，魔语军师司马懿</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【百星王者带你飞】第142期诸葛亮：法王时代，稷下天才诸葛亮</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/2.jpg" alt="">
                                        <a href="">【百星王者带你飞】第141期姜子牙：巅峰王者，姜子牙制霸中路</a>
                                    </div>
                                    <div>
                                        <img src="img/13.jpg" alt="">
                                        <a href="">【百星王者带你飞】第140期赵云：贯穿乱世的雷霆，赵子龙参见</a>
                                    </div>
                                    <div>
                                        <img src="img/最新皮肤李信.jpg" alt="">
                                        <a href="">【百星王者带你飞】第139期孙白杨：稳定摘星，大闹峡谷三人组</a>
                                    </div>
                                    <div>
                                        <img src="img/新英雄蒙恬.jpg" alt="">
                                        <a href="">【百星王者带你飞】第138期蒙恬：横扫战场，唯我蒙恬大将军</a>
                                    </div>
                                    <div>
                                        <img src="img/新英雄镜.jpg" alt="">
                                        <a href="">【百星王者带你飞】第137期黄忠：黄忠牌大炮，三炮带你飞</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 狄仁杰封神榜内容 -->
                            <div class="pictures first-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/2.jpg" alt="">
                                        <a href="">【狄仁杰封神榜】06：狄某读评论时间，品，你细品！</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/1.jpg" alt="">
                                        <a href="">【狄仁杰封神榜】第五期：哦嚯 巅峰赛卡分偶遇老亚瑟直播？</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/3.jpg" alt="">
                                        <a href="">【狄仁杰封神榜】峡谷开挂？勿谓言之不预也</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【狄仁杰封神榜】第四期：峡谷开挂 勿谓言之不预也</a>
                                    </div>
                                    <div>
                                        <img src="img/6.jpg" alt="">
                                        <a href="">【狄仁杰封神榜】第三期：某峡谷治安官 为何立下自裁Flag</a>
                                    </div>
                                    <div>
                                        <img src="img/7.jpg" alt="">
                                        <a href="">【狄仁杰封神榜】第二期：这些消极游戏行为 遇到请举报</a>
                                    </div>
                                    <div>
                                        <img src="img/9.jpg" alt="">
                                        <a href="">【狄仁杰封神榜】第一期：演员不参团？狄仁杰重拳出击</a>
                                    </div>
                                    <div></div>
                                </div>
                            </div>
                            <!-- 棋高一招内容 -->
                            <div class="pictures first-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/1.jpg" alt="">
                                        <a href="">【棋高一招2】第十一期 魔种来袭，新科冠军MQ.逸宝带你快速了解新版本</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/10.jpg" alt="">
                                        <a href="">【棋高一招2】第十期 重庆QG.鸵鸟，魔种之星百里玄策疯狂输出，一刀一个</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/3.jpg" alt="">
                                        <a href="">【棋高一招2】第九期 MQ. 逸宝深度解析攻辅射对位技巧</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/11.jpg" alt="">
                                        <a href="">【棋高一招2】第八期 常规赛MVP RW侠.种子深度解析刺客阵</a>
                                    </div>
                                    <div>
                                        <img src="img/12.jpg" alt="">
                                        <a href="">【棋高一招2】第七期 稷下神坦，MH.沈农民教你太乙真人无限复活术</a>
                                    </div>
                                    <div>
                                        <img src="img/6.jpg" alt="">
                                        <a href="">【棋高一招2】第六期 新长城弟弟射 易老湿鲁班七号掌控雷电</a>
                                    </div>
                                    <div>
                                        <img src="img/7.jpg" alt="">
                                        <a href="">【棋高一招2】第五期 扶桑三远法刺，重庆QG.大牛教你宫本武藏人头收割术</a>
                                    </div>
                                    <div>
                                        <img src="img/9.jpg" alt="">
                                        <a href="">【棋高一招2】第四期 九蜀战士哪家强，KSSC.叶凡称霸王。</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 第2页赛事精选里的转换 -->
                    <div class="video-item">
                        <!-- 赛事精选下的标题 -->
                        <div class="second-head">
                            <div class="font second-tab now">王者炸麦了</div>
                            <div class="font second-tab">荣耀大话王</div>
                            <div class="font second-tab">KPL云电台</div>
                            <div class="font second-tab">超神快讯1+1</div>
                            <div class="font second-tab">荣耀宅急送</div>
                            <div class="font second-tab">王者好莱坞</div>
                            <div class="font second-tab">绝对王者</div>
                        </div>

                        <!-- 赛事精选下的内容 -->
                        <div class="second-body">
                            <!-- 王者炸麦了内容 -->
                            <div class="pictures second-item now">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【王者炸麦了】集结 百炼志问鼎 （完结篇）</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【王者炸麦了】集结 百炼志问鼎 （下）</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/3.jpg" alt="">
                                        <a href="">【王者炸麦了】集结 百炼志问鼎 （上）</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/9.jpg" alt="">
                                        <a href="">【王者炸麦了】春季赛大结局</a>
                                    </div>
                                    <div>
                                        <img src="img/7.jpg" alt="">
                                        <a href="">【王者炸麦了】成都AG超玩会&TS 谁更会毒奶？</a>
                                    </div>
                                    <div>
                                        <img src="img/12.jpg" alt="">
                                        <a href="">【王者炸麦了】久违了线下赛！六点六在线委屈，TS.哈哈哈上线！</a>
                                    </div>
                                    <div>
                                        <img src="img/10.jpg" alt="">
                                        <a href="">【王者炸麦了】五五开黑乐特别篇：一诺灵魂献唱，Cat花海在线约饭</a>
                                    </div>
                                    <div>
                                        <img src="img/6.jpg" alt="">
                                        <a href="">【王者炸麦了】常规赛最后的疯狂</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 荣耀大话王内容 -->
                            <div class="pictures second-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/12.jpg" alt="">
                                        <a href="">【荣耀大话王V】高考助力特别篇 KPL选手为2020高考学子加油助威！</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/2.jpg" alt="">
                                        <a href="">【荣耀大话王V】端午节特别篇 久诚、清清上演甜咸粽子党之争，你是甜党还是咸党？</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/1.jpg" alt="">
                                        <a href="">【荣耀大话王V】父亲节特别篇 KPL选手那些和父亲有关的温馨小事，你想听听吗？</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/9.jpg" alt="">
                                        <a href="">【荣耀大话王V】第3期 狠话环节没看够？这次再多亿点点…</a>
                                    </div>
                                    <div>
                                        <img src="img/7.jpg" alt="">
                                        <a href="">【荣耀大话王V】第2期 RNG.M上演宫斗小剧场 职业选手人均阴阳大师？</a>
                                    </div>
                                    <div>
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【荣耀大话王V】第1期 季后赛赛程引发选手众议 WE现场玩起谁是卧底</a>
                                    </div>
                                    <div>
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【荣耀大话王】一诺发功奶广州TTG.XQ，鹏鹏：打杭州LGD大鹅就图一乐</a>
                                    </div>
                                    <div>
                                        <img src="img/8.png" alt="">
                                        <a href="">【荣耀大话王】一诺六点六在线cue闪光，伊恩扬言ban暴风锐可还行？</a>
                                    </div>
                                </div>
                            </div>
                            <!-- KPL云电台内容 -->
                            <div class="pictures second-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【KPL云电台】第14期 鹏鹏过儿打call天狼绘梦者 在线带货直言不亏</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/10.jpg" alt="">
                                        <a href="">【KPL云电台】第13期 上海EDG.M兄弟商业互吹 柠栀泪流满面 伪装上演开口</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/3.jpg" alt="">
                                        <a href="">【KPL云电台】第12期 传奇教练在线对垒 SK被逼精神分裂</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/11.jpg" alt="">
                                        <a href="">【KPL云电台】第11期 童年回忆录暴风锐沉迷花天酒地 拖米情景</a>
                                    </div>
                                    <div>
                                        <img src="img/1.jpg" alt="">
                                        <a href="">【KPL云电台】第10期 一诺疯狂爆料爱思的小秘密 游戏环节各种听不出</a>
                                    </div>
                                    <div>
                                        <img src="img/12.jpg" alt="">
                                        <a href="">【KPL云电台】母亲节特辑 KPL选手眼中的母亲印象，深情表白母亲超暖心~</a>
                                    </div>
                                    <div>
                                        <img src="img/8.png" alt="">
                                        <a href="">【KPL云电台】第9期 夏诚CP上线 尘夏自曝女儿身 久诚最初遭遇信任危机</a>
                                    </div>
                                    <div>
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【KPL云电台】第8期 小壳正面回应女友谣言 落幕豪掷两千万竟然是为了粉丝</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 超神快讯1内容 -->
                            <div class="pictures second-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【超神快讯1+1】英凯详细解刨TS 5S阵容，神秘嘉宾助阵超神快讯1+1</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【超神快讯1+1】第九期 英凯捡到神秘日记，揭露TS心声</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【超神快讯1+1】第八期 英凯言出必行实现诺言，猪哼英凯竟分析出KPL双胞胎战队</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【超神快讯1+1】第七期 英凯的粉丝朋友再出续集，猪哼英凯实力</a>
                                    </div>
                                    <div>
                                        <img src="img/8.png" alt="">
                                        <a href="">【超神快讯1+1】第六期 英凯的朋友为何逐渐佛系？英凯猪哼全情解析KPL出线大势</a>
                                    </div>
                                    <div>
                                        <img src="img/8.png" alt="">
                                        <a href="">【超神快讯1+1】第五期 英凯演绎训练赛三兄弟真实现状，猪哼英凯飚歌唱出战队心声</a>
                                    </div>
                                    <div>
                                        <img src="img/8.png" alt="">
                                        <a href="">【超神快讯1+1】第四期 英凯自信发微博惨遭打脸，猪哼英凯预测成功抱头痛哭</a>
                                    </div>
                                    <div>
                                        <img src="img/8.png" alt="">
                                        <a href="">【超神快讯1+1】第三期 英凯揭秘谁是KPL御三家杀手，猪哼老师</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 荣耀宅急送内容 -->
                            <div class="pictures second-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/111.jpg" alt="">
                                        <a href="">【荣耀宅急送】22:精彩刺激世冠选拔赛，千层套路送不完</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/222.jpg" alt="">
                                        <a href="">【荣耀宅急送】21：披荆斩棘不止奇迹，恭喜TS！</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/333.jpg" alt="">
                                        <a href="">【荣耀宅急送】20：原来工资体系才是KPL最强的体系</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/444.jpg" alt="">
                                        <a href="">【荣耀宅急送】19：KPL上演新老交替，e星首次无缘季后赛</a>
                                    </div>
                                    <div>
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【荣耀宅急送】18：南京Hero鏖战五局击败LGD</a>
                                    </div>
                                    <div>
                                        <img src="img/4.jpg" alt="">
                                        <a href="">【荣耀宅急送】17：T将军回归教练席，e星好起来了</a>
                                    </div>
                                    <div>
                                        <img src="img/1.jpg" alt="">
                                        <a href="">荣耀宅急送15：KPL赛场骚套路，你确定我看的不是路人局？</a>
                                    </div>
                                    <div>
                                        <img src="img/3.jpg" alt="">
                                        <a href="">荣耀宅急送 14：梦泪李白危险边缘疯狂试探</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 王者好莱坞内容 -->
                            <div class="pictures second-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/4.jpg" alt="">
                                        <a href="">王者好莱坞13：粉丝为了Gemini不奶QG花钱让他念ID？</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/12.jpg" alt="">
                                        <a href="">王者好莱坞12:Gemini</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/13.jpg" alt="">
                                        <a href="">王者好莱坞11：奶王gemini在KPL拿到了五连绝世？</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/5.jpg" alt="">
                                        <a href="">王者好莱坞08：生而无畏战至终章 巅峰之上五冠绝世！</a>
                                    </div>
                                    <div>
                                        <img src="img/8.png" alt="">
                                        <a href="">王者好莱坞07：世界名画？全员莽夫eStar 高地三人罚站</a>
                                    </div>
                                    <div>
                                        <img src="img/2.jpg" alt="">
                                        <a href="">王者好莱坞06：冬冠杯！KPL四大毒奶同台竞技</a>
                                    </div>
                                    <div>
                                        <img src="img/1.jpg" alt="">
                                        <a href="">王者好莱坞05：青春与热血，赤子AG三载征战加冕为王</a>
                                    </div>
                                </div>
                            </div>
                            <!-- 绝对王者内容 -->
                            <div class="pictures second-item">
                                <div class="lists">
                                    <div class="mar">
                                        <img src="img/10.jpg" alt="">
                                        <a href="">【绝对王者】DYG 强者自强，振翅高飞</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/2.jpg" alt="">
                                        <a href="">【绝对王者】广州TTG.XQ 改变发生</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/3.jpg" alt="">
                                        <a href="">【绝对王者】RNG.M，I'll be back</a>
                                    </div>
                                    <div class="mar">
                                        <img src="img/8.png" alt="">
                                        <a href="">【绝对王者】我的名字叫-杭州LGD大鹅</a>
                                    </div>
                                    <div>
                                        <img src="img/5.jpg" alt="">
                                        <a href="">【绝对王者】VG 成败由己造</a>
                                    </div>
                                    <div>
                                        <img src="img/7.jpg" alt="">
                                        <a href="">【绝对王者】TES 欢迎来到季后赛</a>
                                    </div>
                                    <div>
                                        <img src="img/9.jpg" alt="">
                                        <a href="">【绝对王者】赤子之心，历久弥坚！AG超玩会荣耀归来剑指冠军</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                     <!-- 第3页英雄攻略里的转换 -->
                     <div class="hero-method video-item">
                         <!-- 英雄攻略标题 -->
                        <div class="title">
                            <a href="" class="choice font">选择英雄<span class="iconfont icon-xiajiantou"></span></a>
                        </div>
                        <!-- 英雄攻略内容 -->
                        <div class="pictures">
                            <div class="lists">
                                <div class="mar">
                                    <img src="img/1.jpg" alt="">
                                    <a href="">“圣剑吸血流梦奇”教李信做人</a>
                                </div>
                                <div class="mar">
                                    <img src="img/10.jpg" alt="">
                                    <a href="">Cat抢龙花海四杀各直播间评论，拖米：全体起立！！</a>
                                </div>
                                <div class="mar">
                                    <img src="img/3.jpg" alt="">
                                    <a href="">王者荣耀世冠：后期双C如何炸裂输出？这一波让TS告诉你！</a>
                                </div>
                                <div class="mar">
                                    <img src="img/11.jpg" alt="">
                                    <a href="">王者荣耀世冠：CW.Chao干将莫邪站位刁钻，手长是我们的优势！</a>
                                </div>
                                <div>
                                    <img src="img/12.jpg" alt="">
                                    <a href="">王者荣耀梦演：司马懿走中路，有这两个鞋子可以选择？</a>
                                </div>
                                <div>
                                    <img src="img/6.jpg" alt="">
                                    <a href="">大仙击杀秀：赵云大招精准预判，敌方后排无从躲避</a>
                                </div>
                                <div>
                                    <img src="img/7.jpg" alt="">
                                    <a href="">王者荣耀：峡谷里横着走的小卤蛋有多猛</a>
                                </div>
                                <div>
                                    <img src="img/9.jpg" alt="">
                                    <a href="">大仙要秀啦：马可波罗怎么能唯唯诺诺，刺客大仙已经上线</a>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>

            <!-- 英雄攻略 -->
            <div class="yingxiong">
                <!-- 左边导航 -->
                <div class="yx-head">
                    <div class="yx-tab active">热门</div>
                    <div class="yx-tab">坦克</div>
                    <div class="yx-tab">战士</div>
                    <div class="yx-tab">刺客</div>
                    <div class="yx-tab">法师</div>
                    <div class="yx-tab">射手</div>
                    <div class="yx-tab">辅助</div>
                </div>
                <!-- 右边选项卡内容 -->
                <div class="yx-body">
                    <!-- 热门英雄 -->
                    <div class="yx-item active">
                        <div class="yihang">
                            <div>
                                <img src="img/热门1.jpg" alt="">
                                <p>镜</p>
                            </div>
                            <div>
                                <img src="img/热门11.jpg" alt="">
                                <p>虞姬</p>
                            </div>
                            <div>
                                <img src="img/热门10.jpg" alt="">
                                <p>黄忠</p>
                            </div>
                            <div>
                                <img src="img/热门4.jpg" alt="">
                                <p>伽罗</p>
                            </div>
                            <div>
                                <img src="img/热门5.jpg" alt="">
                                <p>庄周</p>
                            </div>
                            <div>
                                <img src="img/热门6.jpg" alt="">
                                <p>蔡文姬</p>
                            </div>
                            <div>
                                <img src="img/热门7.jpg" alt="">
                                <p>孙尚香</p>
                            </div>
                        </div>
                        
                    </div>
                    <!-- 坦克英雄 -->
                    <div class="yx-item">
                        <div class="yihang">
                            <div>
                                <img src="img/热门2.jpg" alt="">
                                <p>后羿</p>
                            </div>
                            <div>
                                <img src="img/热门8.jpg" alt="">
                                <p>妲己</p>
                            </div>
                            <div>
                                <img src="img/热门4.jpg" alt="">
                                <p>伽罗</p>
                            </div>
                            <div>
                                <img src="img/热门6.jpg" alt="">
                                <p>蔡文姬</p>
                            </div>
                            <div>
                                <img src="img/热门11.jpg" alt="">
                                <p>虞姬</p>
                            </div>
                            <div>
                                <img src="img/热门10.jpg" alt="">
                                <p>黄忠</p>
                            </div>
                            <div>
                                <img src="img/热门3.jpg" alt="">
                                <p>孙悟空</p>
                            </div>
                        </div>
                    </div>
                    <!-- 战士英雄 -->
                    <div class="yx-item">
                        <div class="yihang">
                            <div>
                                <img src="img/热门3.jpg" alt="">
                                <p>孙悟空</p>
                            </div>
                            <div>
                                <img src="img/热门0.jpg" alt="">
                                <p>芈月</p>
                            </div>
                            <div>
                                <img src="img/热门2.jpg" alt="">
                                <p>后羿</p>
                            </div>
                            <div>
                                <img src="img/热门9.jpg" alt="">
                                <p>鲁班七号</p>
                            </div>
                            <div>
                                <img src="img/热门10.jpg" alt="">
                                <p>黄忠</p>
                            </div>
                            <div>
                                <img src="img/热门11.jpg" alt="">
                                <p>虞姬</p>
                            </div>
                            <div>
                                <img src="img/热门1.jpg" alt="">
                                <p>镜</p>
                            </div>
                        </div>
                    </div>
                    <!-- 刺客英雄 -->
                    <div class="yx-item">
                        <div class="yihang">
                            <div>
                                <img src="img/热门9.jpg" alt="">
                                <p>鲁班七号</p>
                            </div>
                            <div>
                                <img src="img/热门7.jpg" alt="">
                                <p>孙尚香</p>
                            </div>
                            <div>
                                <img src="img/热门8.jpg" alt="">
                                <p>妲己</p>
                            </div>
                            <div>
                                <img src="img/热门6.jpg" alt="">
                                <p>蔡文姬</p>
                            </div>
                            <div>
                                <img src="img/热门5.jpg" alt="">
                                <p>庄周</p>
                            </div>
                            <div>
                                <img src="img/热门0.jpg" alt="">
                                <p>芈月</p>
                            </div>
                            <div>
                                <img src="img/热门4.jpg" alt="">
                                <p>伽罗</p>
                            </div>
                        </div>
                    </div>
                    <!-- 法师英雄 -->
                    <div class="yx-item">
                        <div class="yihang">
                            <div>
                                <img src="img/热门5.jpg" alt="">
                                <p>庄周</p>
                            </div>
                            <div>
                                <img src="img/热门4.jpg" alt="">
                                <p>芈月</p>
                            </div>
                            <div>
                                <img src="img/热门6.jpg" alt="">
                                <p>蔡文姬</p>
                            </div>
                            <div>
                                <img src="img/热门7.jpg" alt="">
                                <p>孙尚香</p>
                            </div>
                            <div>
                                <img src="img/热门8.jpg" alt="">
                                <p>妲己</p>
                            </div>
                            <div>
                                <img src="img/热门1.jpg" alt="">
                                <p>镜</p>
                            </div>
                            <div>
                                <img src="img/热门2.jpg" alt="">
                                <p>后羿</p>
                            </div>
                        </div>
                    </div>
                    <!-- 射手英雄 -->
                    <div class="yx-item">
                        <div class="yihang">
                            <div>
                                <img src="img/热门11.jpg" alt="">
                                <p>虞姬</p>
                            </div>
                            <div>
                                <img src="img/热门10.jpg" alt="">
                                <p>黄忠</p>
                            </div>
                            <div>
                                <img src="img/热门9.jpg" alt="">
                                <p>鲁班七号</p>
                            </div>
                            <div>
                                <img src="img/热门7.jpg" alt="">
                                <p>孙尚香</p>
                            </div>
                            <div>
                                <img src="img/热门6.jpg" alt="">
                                <p>蔡文姬</p>
                            </div>
                            <div>
                                <img src="img/热门2.jpg" alt="">
                                <p>后羿</p>
                            </div>
                            <div>
                                <img src="img/热门3.jpg" alt="">
                                <p>孙悟空</p>
                            </div>
                        </div>
                    </div>
                    <!-- 辅助英雄 -->
                    <div class="yx-item">
                        <div class="yihang">
                            <div>
                                <img src="img/热门0.jpg" alt="">
                                <p>芈月</p>
                            </div>
                            <div>
                                <img src="img/热门5.jpg" alt="">
                                <p>庄周</p>
                            </div>
                            <div>
                                <img src="img/热门4.jpg" alt="">
                                <p>伽罗</p>
                            </div>
                            <div>
                                <img src="img/热门11.jpg" alt="">
                                <p>虞姬</p>
                            </div>
                            <div>
                                <img src="img/热门2.jpg" alt="">
                                <p>孙悟空</p>
                            </div>
                            <div>
                                <img src="img/热门9.jpg" alt="">
                                <p>鲁班七号</p>
                            </div>
                            <div>
                                <img src="img/热门8.jpg" alt="">
                                <p>妲己</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右边英雄介绍 -->
            <div class="hero">
                <!-- 右边英雄介绍题目 -->
                <div class="title">
                    <!-- 英雄/皮肤 -->
                    <div class="words">
                        <span class="iconfont icon-jiqiren"></span>
                        <b>英雄/皮肤</b>
                    </div>
                    <!-- 更多 -->
                    <div class="more">
                        <a href="">
                            <span class="iconfont icon-jjia-"></span>
                            更多
                        </a>
                    </div>
                </div>

                <!-- 英雄选项卡切换 -->
                <div class="hero-head">
                    <div class="hero-tab active">最新英雄</div>
                    <div class="hero-tab">最新皮肤</div>
                    <div class="hero-tab">周免英雄</div>
                </div>
                <div class="hero-body">
                    <!-- 最新英雄详细 -->
                    <div class="hero-item active">
                        <div class="top">
                            <a href=""><img src="img/新英雄蒙恬.jpg"></a>
                            <div class="text">
                                <b>新英雄：蒙恬</b>
                                <p>上线时间：2020.06.02</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <a href="" title="王昭君"><img src="img/周免英雄1.jpg"></a>
                            <a href="" title="曹操"><img src="img/周免英雄4.jpg"></a>
                            <a href="" title="虞姬"><img src="img/虞姬.jpg"></a>
                        </div>
                    </div>
                    <!-- 最新皮肤详细 -->
                    <div class="hero-item">
                        <div class="top">
                            <a href=""><img src="img/最新皮肤李信.jpg"></a>
                            <div class="text">
                                <b>新皮肤：一念神魔-李信</b>
                                <p>上线时间：即将上线</p>
                            </div>
                        </div>
                        <div class="bottom">
                            <a href="" title="苏烈"><img src="img/苏烈.jpg"></a>
                            <a href="" title="孙尚香"><img src="img/孙尚香.jpg"></a>
                            <a href="" title="雅典娜"><img src="img/雅典娜.png"></a>
                        </div>
                    </div>
                    <!-- 周免英雄详细 -->
                    <div class="hero-item">
                        <div class="shang">
                            <a href=""><img src="img/公孙离.png"></a>
                            <a href=""><img src="img/紫霞.jpg"></a>
                            <a href=""><img src="img/妲己.jpg"></a>
                        </div>
                        <div class="shang">
                            <a href=""><img src="img/孙悟空.jpg"></a>
                            <a href=""><img src="img/周免英雄1.jpg"></a>
                            <a href=""><img src="img/更多英雄.jpg"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 赛事中心 -->
        <div class="match ">
            <!-- 左侧赛事中心 -->
            <div class="left">
                <!-- 赛事题目 -->
                <div class="title">
                    <!-- 赛事中心 -->
                    <div class="words">
                        <span class="iconfont icon-qizhi"></span>
                        <b>赛事中心</b>
                    </div>
                    <!-- 更多 -->
                    <div class="more">
                        <a href="">
                            <span class="iconfont icon-jjia-"></span>
                            更多
                        </a>
                    </div>
                </div>

                <!-- 赛事选项卡切换 -->
                <div class="match-head">
                    <!-- KPl详细 -->
                    <div class="match-tab active">KPL</div>
                    <div class="match-tab">冠军杯</div>
                    <div class="match-tab">KPLGT</div>
                    <div class="match-tab">城市赛</div>
                    <div class="match-tab">高校联赛</div>
                    <div class="match-tab">TGA</div>
                    <div class="match-tab">微信游戏邀请赛</div>
                    <div class="match-tab">模拟战大师赛</div>
                </div>

                <div class="match-body">
                    <!-- KPL内容 -->
                    <div class="match-item active">
                        <!-- 上面的导航 -->
                        <div class="top">
                            <!-- 左边的图片 -->
                            <div class="pic">
                                <img src="img/KPL.jpg">
                            </div>
                            <!-- 右边的导航 -->
                            <div class="navs">
                                <div class="max">
                                    <a href="">【世冠今日预报】重庆QGhappy vs 成都AG超玩会...</a>
                                </div>
                                <div class="min">
                                    <a href="">重庆QGhappy vs 成都AG超玩会，谁能拿首胜？</a>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>KPL</p></div>
                                        <div class="text">【世冠今日预报】武汉eStarPro vs TS，卫冕冠军 vs 新科王者</div>
                                        <div class="time">07-17</div>
                                    </div>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>KPL</p></div>
                                        <div class="text">KPL携手京东零售，不负热爱，一起上场!</div>
                                        <div class="time">07-17</div>
                                    </div>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>KPL</p></div>
                                        <div class="text">中国国际电视台、央视海外CGTN强势报道KPL春季赛总决赛</div>
                                        <div class="time">07-17</div>
                                    </div>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>KPL</p></div>
                                        <div class="text">无惧挑战向阳而生，TS冠军之夜今日18:00惊喜来袭</div>
                                        <div class="time">07-17</div>
                                    </div>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>KPL</p></div>
                                        <div class="text">铠皇进场 无人能挡！T-Cross途铠为KPL春季赛冠军赠送电竞开黑专车使用...</div>
                                        <div class="time">07-17</div>
                                    </div>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>KPL</p></div>
                                        <div class="text">全球好物推荐官降临王者峡谷：薇娅viya成为KPL手速女王</div>
                                        <div class="time">07-17</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 下面的视频 -->
                        <div class="bottom">
                            <div>
                                <img src="img/最新皮肤李信.jpg">
                                <a href="">《灵儿的快问快答》第二季上线营地～</a>
                            </div>
                            <div>
                                <img src="img/周免英雄7.jpg">
                                <a href="">【赛高采访】赛高世冠现场花絮——GOG</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤马可波罗.jpg">
                                <a href="">【处长专访】TS神人和暖阳：训练赛我们老挨打，被暴揍</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤猪八戒.jpg">
                                <a href="">【加菲】李信世冠纪念皮肤超燃混剪</a>
                            </div>
                            <div>
                                <img src="img/周免英雄3.jpg">
                                <a href="">12支豪门争夺3200万奖金，王者荣耀世冠今日开战</a>
                            </div>
                            <div>
                                <img src="img/周免英雄5.jpg">
                                <a href="">这蒙恬太超标了！初登KPL瞬拿三杀！</a>
                            </div>
                            <div>
                                <img src="img/周免英雄6.jpg">
                                <a href="">一诺访谈——我也害怕下滑，但我依旧勇敢前行</a>
                            </div>
                            <div>
                                <img src="img/周免英雄2.png">
                                <a href="">2020世冠正赛揭幕战：AG vs TS，一诺暖阳正赛见！</a>
                            </div>
                        </div>
                    </div>
                    <!-- 冠军杯内容 -->
                    <div class="match-item">
                        <!-- 上面的导航 -->
                        <div class="top">
                            <!-- 左边的图片 -->
                            <div class="pic">
                                <img src="img/冠军杯.jpg">
                            </div>
                            <!-- 右边的导航 -->
                            <div class="navs">
                                <div class="max">
                                    <a href="">世冠快讯：VG有惊无险再积一分，十三公孙离牵制对...</a>
                                </div>
                                <div class="min">
                                    <a href="">VG有惊无险再积一分，十三公孙离牵制对手助队友抢下龙王</a>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>冠军杯</p></div>
                                        <div class="text">你是赛评师：武汉ES.Cat大乔妙抢龙王阻断TS连胜，登顶A组榜首的他们...</div>
                                        <div class="time">07-18</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>冠军杯</p></div>
                                        <div class="text">世冠快讯：武汉eStar力压TS，猫神大乔抢龙王、花海裴擒虎四杀</div>
                                        <div class="time">07-17</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>冠军杯</p></div>
                                        <div class="text">世冠快讯：广州TTG.XQ再下一城领跑积分榜，绑兔橘右京超神杀戮节奏飞...</div>
                                        <div class="time">07-17</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>冠军杯</p></div>
                                        <div class="text">世冠快讯：VG让一追二逆转DYG，十三马可化身刺客直扑C位</div>
                                        <div class="time">07-17</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>冠军杯</p></div>
                                        <div class="text">世冠快讯：九尾婉儿盲飞逆转节奏，广州TTG.XQ针对BP击溃GOG</div>
                                        <div class="time">07-16</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>冠军杯</p></div>
                                        <div class="text">你是赛评师：武汉ES零封WE赢得世冠小组赛首战，卫冕冠军他们“回来”...</div>
                                        <div class="time">07-16</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 下面的视频 -->
                        <div class="bottom">
                            <div>
                                <img src="img/新英雄蒙恬.jpg">
                                <a href="">2020王者荣耀世界冠军杯小组赛Day4 Recap</a>
                            </div>
                            <div>
                                <img src="img/新英雄蒙犽.jpg">
                                <a href="">重庆QGhappy.Fly英勇无畏驰骋峡谷</a>
                            </div>
                            
                            <div>
                                <img src="img/新英雄西施.jpg">
                                <a href="">【赛后采访】重庆QG.SK：增加队伍的核心点位当前版本在后期有更</a>
                            </div>
                            <div>
                                <img src="img/新英雄镜.jpg">
                                <a href="">Cat抢龙花海四杀各直播间评论，拖米：全体起立！！</a>
                            </div>
                            <div>
                                <img src="img/新英雄鲁班大师.jpg">
                                <a href="">世冠灵魂画手DYG篇：久诚手绘峡谷故事 易峥猜画在线抢答</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤李信.jpg">
                                <a href="">世冠群访花絮：群访拍照环节，47教练站在猫神旁边表示压力很</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤马超.jpg">
                                <a href="">世冠赛后群访cat：为什么拿出大乔孙膑的双辅助体系？</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤猪八戒.jpg">
                                <a href="">【加菲】世冠赛事聚焦——大乔也能抢龙？</a>
                            </div>
                        </div>
                    </div>
                    <!-- KPLGT内容 -->
                    <div class="match-item">
                        <!-- 上面的导航 -->
                        <div class="top">
                            <!-- 左边的图片 -->
                            <div class="pic">
                                <img src="img/KPLGT.jpg">
                            </div>
                            <!-- 右边的导航 -->
                            <div class="navs">
                                <div class="max">
                                    <a href="">12支“百炼”劲旅“志问鼎”，王者荣耀世冠今日开...</a>
                                </div>
                                <div class="min">
                                    <a href="">12支“百炼”劲旅“志问鼎”，王者荣耀世冠今日开战</a>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>KPLGT</p></div>
                                        <div class="text">世冠杯KPLGT赛区巡礼：四队携手出征，KPL战队需小心提防</div>
                                        <div class="time">07-14</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>KPLGT</p></div>
                                        <div class="text">KPL：去年周瑜今年干扰，是GT带火还是大势所趋</div>
                                        <div class="time">05-29</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>KPLGT</p></div>
                                        <div class="text">总决赛让三追四！GOG成功逆袭MTG终结宿命之战成功夺冠！</div>
                                        <div class="time">05-19</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>KPLGT</p></div>
                                        <div class="text">首个总决赛让三追四，GOG击败MTG卫冕总冠军，久龙尽力了</div>
                                        <div class="time">05-19</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>KPLGT</p></div>
                                        <div class="text">KPLGT快讯：GOG让三追四MTG强势夺冠！野王Nofear喜提总决赛FMVP</div>
                                        <div class="time">05-18</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>KPLGT</p></div>
                                        <div class="text">5月18日，KPLGT春季赛总决赛激情开幕！双G宿命对决再开新篇章</div>
                                        <div class="time">05-16</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 下面的视频 -->
                        <div class="bottom">
                            <div>
                                <img src="img/新英雄蒙恬.jpg">
                                <a href="">12支豪门争夺3200万奖金，王者荣耀世冠今日开战</a>
                            </div>
                            <div>
                                <img src="img/周免英雄6.jpg">
                                <a href="">【加菲】居里组合精彩相声解说，是真的很机车诶！</a>
                            </div>
                            
                            <div>
                                <img src="img/周免英雄2.png">
                                <a href="">《逐梦荣耀》第四期：ROX独家采访 干就完事死亡A组信心满满</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤李信.jpg">
                                <a href="">《逐梦荣耀》第三期：是VSG星火燎原 还是ROX凤凰浴火涅槃</a>
                            </div>
                            <div>
                                <img src="img/周免英雄7.jpg">
                                <a href="">《逐梦荣耀》第三期：是VSG星火燎原 还是ROX凤凰浴火涅槃</a>
                            </div>
                            <div>
                                <img src="img/周免英雄5.jpg">
                                <a href="">【加菲】世冠强强对决即将拉开帷幕</a>
                            </div>
                            <div>
                                <img src="img/周免英雄3.jpg">
                                <a href="">《逐梦荣耀》第一期：2020王者荣耀世冠KPLGT各队伍现状</a>
                            </div>
                            <div>
                                <img src="img/新英雄蒙犽.jpg">
                                <a href="">KPLGT春季赛 总决赛 MTG vs GOG 第七局</a>
                            </div>
                        </div>
                    </div>
                    <!-- 城市赛内容 -->
                    <div class="match-item">
                        <!-- 上面的导航 -->
                        <div class="top">
                            <!-- 左边的图片 -->
                            <div class="pic">
                                <img src="img/城市赛.jpg">
                            </div>
                            <!-- 右边的导航 -->
                            <div class="navs">
                                <div class="max">
                                    <a href="">胶州的星光 | 幸会，带来成长的舞台</a>
                                </div>
                                <div class="min">
                                    <a href="">胶州湾的星光 | 幸会，带来成长的舞台</a>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>城市赛</p></div>
                                        <div class="text">一招即浪第16期：如何做称职大哥，阅读蒙恬使用手册</div>
                                        <div class="time">07-15</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>城市赛</p></div>
                                        <div class="text">王者荣耀首届全国大赛回顾：高手在民间，冠军终加冕</div>
                                        <div class="time">07-13</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>城市赛</p></div>
                                        <div class="text">斗鱼·祈夺得首届王者荣耀全国大赛总冠军</div>
                                        <div class="time">07-13</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>城市赛</p></div>
                                        <div class="text">大众赛王者进军职业殿堂 王者荣耀全国大赛青岛收官</div>
                                        <div class="time">07-12</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>城市赛</p></div>
                                        <div class="text">全国大赛总决赛晋级名单出炉！7月12日一起见证总冠军诞生</div>
                                        <div class="time">07-12</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>城市赛</p></div>
                                        <div class="text">王者荣耀全国大赛正式打响 第一日小组赛战报新鲜出炉</div>
                                        <div class="time">07-11</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 下面的视频 -->
                        <div class="bottom">
                            <div>
                                <img src="img/周免英雄7.jpg">
                                <a href="">【王者荣耀全国大赛】高校战队的晋级之路（下集）</a>
                            </div>
                            <div>
                                <img src="img/周免英雄6.jpg">
                                <a href="">一招即浪第16期：如何做称职大哥，阅读蒙恬使用手册</a>
                            </div>
                            
                            <div>
                                <img src="img/周免英雄5.jpg">
                                <a href="">斗鱼·祈夺得首届王者荣耀全国大赛总冠军！</a>
                            </div>
                            <div>
                                <img src="img/新英雄蒙恬.jpg">
                                <a href="">全国大赛总冠军专访 斗鱼·祈的荣耀之路</a>
                            </div>
                            <div>
                                <img src="img/新英雄西施.jpg">
                                <a href="">KPL：惊！有只队伍竟百分百的胜率夺冠！你听说了吗</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤马超.jpg">
                                <a href="">王者荣耀：你和职业电竞只差一步！这些大众赛事你听说过吗</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤猪八戒.jpg">
                                <a href="">王者荣耀全国大赛灯光秀 后羿“惊现”青岛浮山湾</a>
                            </div>
                            <div>
                                <img src="img/周免英雄2.png">
                                <a href="">《一招即浪》第15期:上单霸主马超 帅气身法操作秀</a>
                            </div>
                        </div>
                    </div>
                    <!-- 高校联赛内容 -->
                    <div class="match-item">
                        <!-- 上面的导航 -->
                        <div class="top">
                            <!-- 左边的图片 -->
                            <div class="pic">
                                <img src="img/高校联赛.jpg">
                            </div>
                            <!-- 右边的导航 -->
                            <div class="navs">
                                <div class="max">
                                    <a href="">胶州的星光 | 幸会，带来成长的舞台</a>
                                </div>
                                <div class="min">
                                    <a href="">胶州湾的星光 | 幸会，带来成长的舞台</a>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>高校联</p></div>
                                        <div class="text">高校排行榜挑战落下帷幕，最强校队正式加冕</div>
                                        <div class="time">07-16</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>高校联</p></div>
                                        <div class="text">一招即浪第16期：如何做称职大哥，阅读蒙恬使用手册</div>
                                        <div class="time">07-15</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>高校联</p></div>
                                        <div class="text">王者荣耀首届全国大赛回顾：高手在民间，冠军终加冕</div>
                                        <div class="time">07-13</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>高校联</p></div>
                                        <div class="text">斗鱼·祈夺得首届王者荣耀全国大赛总冠军</div>
                                        <div class="time">07-13</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>高校联</p></div>
                                        <div class="text">大众赛王者进军职业殿堂 王者荣耀全国大赛青岛收官</div>
                                        <div class="time">07-12</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>高校联</p></div>
                                        <div class="text">全国大赛总决赛晋级名单出炉！7月12日一起见证总冠军诞生</div>
                                        <div class="time">07-12</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 下面的视频 -->
                        <div class="bottom">
                            <div>
                                <img src="img/周免英雄6.jpg">
                                <a href="">【王者荣耀全国大赛】高校战队的晋级之路（下集）</a>
                            </div>
                            <div>
                                <img src="img/周免英雄5.jpg">
                                <a href="">一招即浪第16期：如何做称职大哥，阅读蒙恬使用手册</a>
                            </div>
                            
                            <div>
                                <img src="img/新英雄西施.jpg">
                                <a href="">斗鱼·祈夺得首届王者荣耀全国大赛总冠军！</a>
                            </div>
                            <div>
                                <img src="img/新英雄镜.jpg">
                                <a href="">王者荣耀全国大赛灯光秀 后羿“惊现”青岛浮山湾</a>
                            </div>
                            <div>
                                <img src="img/新英雄鲁班大师.jpg">
                                <a href="">《一招即浪》第15期:上单霸主马超 帅气身法操作秀</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤李信.jpg">
                                <a href="">王者荣耀：你和职业电竞只差一步！这些大众赛事你听说过吗</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤猪八戒.jpg">
                                <a href="">KPL：惊！有只队伍竟百分百的胜率夺冠！你听说了吗</a>
                            </div>
                            <div>
                                <img src="img/最新皮肤马超.jpg">
                                <a href="">王者荣耀全国大赛灯光秀 后羿“惊现”青岛浮山湾</a>
                            </div>
                        </div>
                    </div>
                    <!-- TGA内容 -->
                    <div class="match-item">
                        <!-- 上面的导航 -->
                        <div class="top">
                            <!-- 左边的图片 -->
                            <div class="pic">
                                <img src="img/TGA.jpg">
                            </div>
                            <!-- 右边的导航 -->
                            <div class="navs">
                                <div class="max">
                                    <a href="">【战报】王者荣耀4月第二周C组：公孙离岑中归月...</a>
                                </div>
                                <div class="min">
                                    <a href="">
                                        【战报】王者荣耀4月第二周C组：公孙离岑中归月 DC战队顺利登顶</a>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>TGA</p></div>
                                        <div class="text">【战报】王者荣耀4月第三周：杨玉环锋芒毕露 HEC碾压取胜</div>
                                        <div class="time">05-16</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>TGA</p></div>
                                        <div class="text">王者荣耀4月第三周：杨玉环锋芒毕露 HEC碾压取胜</div>
                                        <div class="time">04-20</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>TGA</p></div>
                                        <div class="text">【战报】TGA王者荣耀3月月赛：关羽无人可挡 TS碾压夺冠</div>
                                        <div class="time">04-20</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>TGA</p></div>
                                        <div class="text">【战报】王者荣耀4月第一周：团灭翻盘 King锁定周冠军</div>
                                        <div class="time">04-20</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>TGA</p></div>
                                        <div class="text">【战报】王者荣耀4月第二周B组：强拆水晶 GQL获胜夺魁</div>
                                        <div class="time">04-20</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>TGA</p></div>
                                        <div class="text">王者荣耀4月第二周B组：强拆水晶 GQL脱颖而出</div>
                                        <div class="time">04-12</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 下面的视频 -->
                        <div class="bottom">
                            <div>
                                <img src="img/1.jpg">
                                <a href="">2018 TGA VTG VS ADC set 1</a>
                            </div>
                            <div>
                                <img src="img/2.jpg">
                                <a href="">2018 TGA VTG VS ADC set 3</a>
                            </div>
                            
                            <div>
                                <img src="img/3.jpg">
                                <a href="">2018 TGA VTG VS ADC set 2</a>
                            </div>
                            <div>
                                <img src="img/4.jpg">
                                <a href="">2018 TGA VTG VS ADC set 3</a>
                            </div>
                            <div>
                                <img src="img/5.jpg">
                                <a href="">2018 TGA LYG VS sViper set 2</a>
                            </div>
                            <div>
                                <img src="img/6.jpg">
                                <a href="">2018 TGA VTG VS RF set 1</a>
                            </div>
                            <div>
                                <img src="img/7.jpg">
                                <a href="">2018 TGA VTG VS RF set 3</a>
                            </div>
                            <div>
                                <img src="img/8.png">
                                <a href="">2018 TGA LYG VS sViper set 3</a>
                            </div>
                        </div>
                    </div>
                    <!-- 微信游戏邀请赛内容 -->
                    <div class="match-item">
                        <!-- 上面的导航 -->
                        <div class="top">
                            <!-- 左边的图片 -->
                            <div class="pic">
                                <img src="img/微信游戏邀请赛.jpg">
                            </div>
                            <!-- 右边的导航 -->
                            <div class="navs">
                                <div class="max">
                                    <a href="">坤音四子ONER率队决战峡谷，杨迪爆笑解说聚星之夜</a>
                                </div>
                                <div class="min">
                                    <a href="">斗鱼直播、虎牙直播、触手直播、企鹅电竞四大平台的《王者荣耀》超...</a>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>微信游</p></div>
                                        <div class="text">聚星之夜明星熠熠，同台争锋谁才是最强C位</div>
                                        <div class="time">02-12</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>微信游</p></div>
                                        <div class="text">聚星之夜王者集结，ONER带队峡谷开黑</div>
                                        <div class="time">02-02</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>微信游</p></div>
                                        <div class="text">微信游戏邀请赛 聚星之夜－亚运冠军表演赛</div>
                                        <div class="time">01-29</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>微信游</p></div>
                                        <div class="text">微信游戏邀请赛 聚星之夜－英雄模仿赛</div>
                                        <div class="time">01-29</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>微信游</p></div>
                                        <div class="text">小渝后羿百发百中 丢丢呆萌模仿安琪拉</div>
                                        <div class="time">01-29</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>微信游</p></div>
                                        <div class="text">许阿姨甜美开唱捉泥鳅 教父毒奶惨变“炮灰”</div>
                                        <div class="time">01-29</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 下面的视频 -->
                        <div class="bottom">
                            <div>
                                <img src="img/5.jpg">
                                <a href="">聚星之夜王者集结，ONER带队峡谷开黑</a>
                            </div>
                            <div>
                                <img src="img/2.jpg">
                                <a href="">聚星之夜明星熠熠，同台争锋谁才是最强C位</a>
                            </div>
                            
                            <div>
                                <img src="img/3.jpg">
                                <a href="">微信游戏邀请赛 聚星之夜－亚运冠军表演赛</a>
                            </div>
                            <div>
                                <img src="img/7.jpg">
                                <a href="">微信游戏邀请赛 聚星之夜－女神</a>
                            </div>
                            <div>
                                <img src="img/8.png">
                                <a href="">微信游戏邀请赛 聚星之夜－明星表演赛</a>
                            </div>
                            <div>
                                <img src="img/1.jpg">
                                <a href="">微信游戏邀请赛 聚星之夜－主播揭幕战</a>
                            </div>
                            <div>
                                <img src="img/6.jpg">
                                <a href="">微信游戏邀请赛 聚星之夜－C位争夺战</a>
                            </div>
                            <div>
                                <img src="img/4.jpg">
                                <a href="">微信游戏邀请赛 聚星之夜－英雄</a>
                            </div>
                        </div>
                    </div>
                    <!-- 模拟战大师赛内容 -->
                    <div class="match-item">
                        <!-- 上面的导航 -->
                        <div class="top">
                            <!-- 左边的图片 -->
                            <div class="pic">
                                <img src="img/模拟战大师赛.jpg">
                            </div>
                            <!-- 右边的导航 -->
                            <div class="navs">
                                <div class="max">
                                    <a href="">王者模拟战职业大师赛快讯：扶桑刺、攻辅射双分天...</a>
                                </div>
                                <div class="min">
                                    <a href="">王者模拟战职业大师赛7月5日进行总决赛的对抗，第一阶段：个人巅峰...</a>
                                </div>
                                <div class="tips">
                                    <div class="tip">
                                        <div class="fuhao"><p>模拟站</p></div>
                                        <div class="text">斗鱼签约战队DYG、RW侠、MQ、QGhappy出征模拟战大师赛总决赛！</div>
                                        <div class="time">07-05</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>模拟站</p></div>
                                        <div class="text">模拟对决，一战成名！八大俱乐部整装待发！王者模拟战职业大师赛总决...</div>
                                        <div class="time">07-04</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>模拟站</p></div>
                                        <div class="text">王者模拟战职业大师赛季后赛第二周：8支俱乐部全部晋级完毕！首届总决...</div>
                                        <div class="time">06-23</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>模拟站</p></div>
                                        <div class="text">王者模拟战职业大师赛快讯：重庆QG四顶登狂砍63分，赶上总决赛末班车</div>
                                        <div class="time">06-22</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>模拟站</p></div>
                                        <div class="text">王者模拟战职业大师赛快讯：双末世射手阵容近乎无敌，三星后羿火力全...</div>
                                        <div class="time">06-21</div>
                                    </div>
                                    <div class="tip">
                                        <div class="fuhao"><p>模拟站</p></div>
                                        <div class="text">王者模拟战职业大师赛突围赛第一轮：“永远的神”名号易主，鲁班七号...</div>
                                        <div class="time">06-20</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 下面的视频 -->
                        <div class="bottom">
                            <div>
                                <img src="img/1.jpg">
                                <a href="">【棋高一招2】第十一期 魔种来袭，新科冠军MQ.逸宝带你快速了解新版本</a>
                            </div>
                            <div>
                                <img src="img/8.png">
                                <a href="">【王者时刻】MQ.摸鱼呆呆攻辅吴神射细节站位拿下比赛</a>
                            </div>
                            
                            <div>
                                <img src="img/4.jpg">
                                <a href="">【棋神精彩集锦】MQ战队二度登顶终获总决赛冠军宝座</a>
                            </div>
                            <div>
                                <img src="img/3.jpg">
                                <a href="">王者模拟战职业大师赛春季赛总决</a>
                            </div>
                            <div>
                                <img src="img/7.jpg">
                                <a href="">【王者时刻】DYG.情书扶桑法刺助DYG夺得亚军</a>
                            </div>
                            <div>
                                <img src="img/5.jpg">
                                <a href="">【王者时刻】NMG.二师兄攻辅吴神射暴力输出无人能挡</a>
                            </div>
                            <div>
                                <img src="img/2.jpg">
                                <a href="">【王者时刻】重庆QG.鸵鸟爆炸质量扶桑群雄刺客无懈可击</a>
                            </div>
                            <div>
                                <img src="img/6.jpg">
                                <a href="">【王者时刻】重庆QG.摇摆哥扶桑</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧KPL赛程 -->
            <div class="right">
                <div class="title">
                    <!-- 赛程 -->
                    <div class="words">
                        <span class="iconfont icon-rili"></span>
                        <b>KPL赛程</b>
                    </div>
                    <!-- 日程 -->
                    <div class="money">
                        <a href="">
                            <span class="iconfont icon-qianmoney47 "></span>
                            购票
                        </a>
                    </div>
                    <!-- 更多 -->
                    <div class="more">
                        <a href="">
                            <span class="iconfont icon-jjia-"></span>
                            更多
                        </a>
                    </div>
                </div>
                <!-- 表头 -->
                <div class="table">
                    <div>时间</div>
                    <div>战队</div>
                    <div></div>
                    <div>战队</div>
                </div>
                <div class="data">
                    <div class="time">6-13 18:00</div>
                    <div class="logo AG">
                        <img src="img/成都AG.png">
                        <span>成都AG</span>
                    </div>
                    <div class="VS">VS</div>
                    <div class="logo TS">
                        <img src="img/TS.png">
                        <span>TS</apan>
                    </div>
                </div>
                <div class="pic">
                    <a href=""><img src="img/KPI赛程.jpg"></a>
                </div>
            </div>
        </div> 

        <!-- 底部信息 -->
        <div class="footer">
            <div class="top">
                <img src="img/腾讯互动娱乐.png" alt="">
                <img src="img/TiMi.jpg" alt="">
            </div>
            <div class="bottom">
                <div class="left">
                    <pre>抵制不良游戏  拒绝盗版游戏  注意自我保护  谨防受骗上当  适度游戏益脑  沉迷游戏伤身  
合理安排时间  享受健康生活

《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创
作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。
                    </pre>
                </div>
                <div class="right">
                        <pre>
<a href="">腾讯互动娱乐|服务条款|隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|
广告服务及商务合作</a>

COPYRIGHT © 1998 - 2020 TENCENT. ALL RIGHTS RESERVED.                          <a href="">腾讯公司版权所有</a> 

<a href=""><img src="img/工商网监电子标识.png" alt="">工商网监电子标识 |粤网文[2017]6138-1456号|（总）网出证（粤）字第057号</a> 
<img src="img/文网游备字.png" alt="">文网游备字[2016]M-CSG 0059 号|新广出审<a href="">[2017] 6712</a>号|ISBN 978-7-7979-8408-9

全国文化市场统一举报电话：12318
                        </pre>
                </div>
            </div>
         </div>
    </div>

    <!-- 侧边二维码 -->
    <div class="sidebar">
        <!-- 二维码 -->
        <img src="img/二维码.jpg">
        <!-- 下边名称 -->
        <div class="name">
            <div class="weibo">
                <span class="iconfont icon-weibo"></span> 官方微博
            </div>
            <div class="weixin">
                <span class="iconfont icon-gongzhonghao"></span> 微信公众号
            </div>

             <!-- 弹出王者二维码 -->
            <div class="wang">
                <img src="img/微信二维码.jpg">
                <p>扫码关注官方公众号</p>
                <p>获取最新资讯及好礼</p>
            </div>
        </div>
    </div>
</body>

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    // 腾讯游戏排行榜 下拉框
    var gamepl = document.querySelector('.nav .one .right .game')
    var gameplist = document.querySelector('.nav .paihang')
    gamepl.onmouseover = function(){
        var obj = event.target;
        if(obj.classList.contains('product')){
            gameplist.style.height = '500px';
        }
    }
    gameplist.onmouseover = function () {
        this.style.height = '500px'
    }
    gamepl.onmouseout = function () {
        gameplist.style.height = '0px'
    }
    gameplist.onmouseout = function () {
        gameplist.style.height = '0px'
    }

    // 英雄攻略下拉框
    var heropl = document.querySelector('.hero-method .title')
    var heroplist = document.querySelector('.content .yingxiong')
    heropl.onmouseover = function(){
        var obj = event.target;
        if(obj.classList.contains('choice')){
            heroplist.style.height = '280px';
        }
    }
    heroplist.onmouseover = function () {
        this.style.height = '280px'
    }
    heropl.onmouseout = function () {
        heroplist.style.height = '0px'
    }

    // 英雄攻略的弹出框
    $('.yx-tab').mouseover(function () {
        var index = $(this).index();
        $('.yx-tab').removeClass('active');
        $(this).addClass('active');
        $('.yx-item').removeClass('active');
        $('.yx-item').eq(index).addClass('active');
    })

    // 百力滋大挑战广告左右切换
    $(document).ready(function(){
        //设计案例切换
        $('.new_telst li').mouseover(function(){
            var liindex = $('.new_telst li').index(this);
            $(this).addClass('newon').siblings().removeClass('newon');
            $('.new-wrap div.new_lst').eq(liindex).fadeIn(150).siblings('div.new_lst').hide();
            var liWidth = $('.new_telst li').width();
            $('.newtel .new_telst p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
        });    
    });
    //中间广告 左右切换
    $('.tab').mouseover(function(){
        var index = $(this).index();
        $('.tab').removeClass('active');
        $(this).addClass('active');
        $('.tab-item').removeClass('active');
        $('.tab-item').eq(index).addClass('active');
    })
    // 内容中心切换
    $('.video-tab').mouseover(function () {
        var index = $(this).index();
        $('.video-tab').removeClass('act');
        $(this).addClass('act');
        $('.video-item').removeClass('act');
        $('.video-item').eq(index).addClass('act');
    })
    // 内容中心下第一页内的切换
    $('.first-tab').mouseover(function () {
        var index = $(this).index();
        $('.first-tab').removeClass('now');
        $(this).addClass('now');
        $('.first-item').removeClass('now');
        $('.first-item').eq(index).addClass('now');
    })
     // 内容中心下第二页内的切换
     $('.second-tab').mouseover(function () {
        var index = $(this).index();
        $('.second-tab').removeClass('now');
        $(this).addClass('now');
        $('.second-item').removeClass('now');
        $('.second-item').eq(index).addClass('now');
    })
    // 右侧英雄栏
    $('.hero-tab').mouseover(function () {
        var index = $(this).index();
        $('.hero-tab').removeClass('active');
        $(this).addClass('active');
        $('.hero-item').removeClass('active');
        $('.hero-item').eq(index).addClass('active');
    })
    // 赛事中心
    $('.match-tab').mouseover(function () {
        var index = $(this).index();
        $('.match-tab').removeClass('active');
        $(this).addClass('active');
        $('.match-item').removeClass('active');
        $('.match-item').eq(index).addClass('active');
    })
</script>
</html>